<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 9.目标：全选状态
    9.0 v-model关联全选状态
    页面变化(勾选true, 未勾选false) -> v-model -> isAll变量 -->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
    <label for="toggle-all"></label>
    <!-- 3.0 键盘事件-回车按键
        3.1 输入框-v-model获取值 -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="downFn"
      v-model="task"
    />
  </header>
</template>

<script>
//3.目标-新增任务
export default {
  props: ['arr'],
  data() {
    return {
      task: '',
    }
  },
  methods: {
    downFn() {
      //3.2(重点)-当前任务名字要加到list数组里
      //3.2-1子传父技术--在父页面的 <TodoHeader >标签加 @create="createFn"
      //3.2-1利用  this.$emit()触发"create"事件，把输入框的值传递给父页面，父页面进行添加
      this.$emit('create', this.task)
      this.task = '' //添加成功-输入框为空
    },
  },
  //9.1定义计算属性//checked只有true和flase
  computed: {
    isAll: {
      set(checked) {
        //9.2点击页面的全选框会影响全部小选框的值--全选框什么状态--小选选框跟随
        return this.arr.forEach((item) => {
          item.isDone = checked
        })
      },
      get() {
        //9.3小选框影响全选框--小选框全部为true--全选框才算true反则
        //9.3.1如果没有数据直接不遍历
        return this.arr.length!==0&&this.arr.every(item=>item.isDone===true)
      },
    },
  },
}
</script>
